<template>
  <div class="num-total">
    <div class="chart-container" ref="numTotalBox">
      <a-row
        class="h-100p"
        :gutter="16"
        style="margin-left: 0; margin-right: -16px"
      >
        <a-col
          v-for="(list, listIndex) of data"
          :key="listIndex"
          :xs="24"
          :sm="8"
        >
          <a-row :gutter="16" class="w-100p h-100p border-radius-4">
            <a-col
              class="total-number chart-box2"
              v-for="(item, key) in list"
              :key="key"
              :span="8"
              style="border-radius: 0px"
            >
              <div class="number-box number">
                <count-to
                  :start-val="item.oldVal"
                  :end-val="item.newVal"
                  :duration="3000"
                />
                <span class="unit"> {{ item.unit }} </span>
              </div>
              <div class="title">{{ item.title }}</div>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  watch,
  nextTick,
  onMounted,
} from "vue";
import CountTo from "../countTo/index.vue";
import store from "../../../../store";
import common from "../../utils/common";

export default defineComponent({
  name: "EnergyNumTotal",
  components: { CountTo },
  setup() {
    const state = reactive({
      numTotalBox: null,
      itemWidth: "100px",
      data: [
        {
          this_month_el: {
            ...common.countToInit,
            title: "本月总用电",
            unit: "kw·h",
          },
          house_average_el: {
            ...common.countToInit,
            title: "户均用电",
            unit: "kw·h",
          },
          area_average_el: {
            ...common.countToInit,
            title: "面均用电",
            unit: "kw·h",
          },
        },
        {
          this_month_water: {
            ...common.countToInit,
            title: "本日总用水",
            unit: "㎡",
          },
          house_average_water: {
            ...common.countToInit,
            title: "户均用水",
            unit: "㎡",
          },
          area_average_water: {
            ...common.countToInit,
            title: "面均用水",
            unit: "㎡",
          },
        },
        {
          total_el: {
            ...common.countToInit,
            title: "累计用电",
            unit: "kw·h",
          },
          total_water: {
            ...common.countToInit,
            title: "累计用水",
            unit: "㎡",
          },
          expect_pay_money: {
            ...common.countToInit,
            title: "预计开支",
            unit: "万元",
          },
        },
      ],
    });

    watch(
      () => store.getters.centerControl.Energy_topData,
      (val) => {
        if (val) {
          getData();
        }
      }
    );

    const getData = () => {
      const { Energy_topData } = store.getters.centerControl;
      if (Energy_topData) {
        for (let key in Energy_topData) {
          let data =
            state.data[0][key] || state.data[1][key] || state.data[2][key];
          data.oldVal = data.newVal;
          data.newVal = Energy_topData[key];
        }
      }
    };

    getData();

    return {
      ...toRefs(state),
    };
  },
});
</script>
<style lang="less" scoped>
@import "../../styles/common.less";
.unit {
  font-size: 1.4rem;
  margin-left: 0.5rem;
}
</style>
